<template>

	<div class="choose">
    	<div class="item" v-for="n in chooseData"> 
			<img v-bind:src="n.image" v-lazy="n.image">
			<div class="group">
				<p>{{n.title}}</p>
				<span>浏览量：{{n.views}}</span>
			</div>
		</div>
			
		<div class="more" @click="loadMore()" v-show="isShow">
			还剩下{{num}}篇
		</div>
    </div>

</template>

<script>
export default {
	data(){
		return {
			arr: [],
			count: 0,	
			isShow: true,
			isHidden: false,
			num: 27
		}
	},
	methods: {
		loadMore(){	
			var url = "";
			if(this.count==0){
				url = "./static/more1.json"
			}else if(this.count==1){
				url = "./static/more2.json"
			}else if(this.count==2){
				url = "./static/more3.json"
			}
			fetch(url).then(function(res){
				return res.json();
			})
			.then((res)=>{	
				for(var i = 0;i<res.data.data.length;i++){
					this.arr.push(res.data.data[i]);
				}
			})
			if(this.num<10){		
				this.isShow  = this.isHidden;		
			}
			this.count++
			this.num -= 10
		}
	},
	computed:{
		chooseData(){
			return this.$store.state.choosedata;		
		}	
	},
	mounted(){
		this.$store.commit("getChooseData");
	},		
    created(){
    	this.arr = this.chooseData
    }
 }
</script>

<style>
.item{
	width: 100%;
	height: 4.3rem;
}
.item img{
	width: 100%;
	height: 3.5rem;
}
.group{
	width: 100%;
	height: 0.8rem;
	display: flex;
	justify-content: space-between;
	line-height: 0.8rem;
	padding: 0 .1rem;
	font-size: .25rem;
}
.group p{
	width: 50%;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #333;	
}
.group span{
	display: inline-block;
	font-size: .22rem;
	color: #999;
}
.more{
	width: 6rem;
	height: .6rem;
	color: #666;
	background-color: #ddd;
	font-size: .3rem;
	line-height: .6rem;
	text-align: center;
	margin: .2rem auto;
	border-radius:25px;
}
</style>